<template>
  <view>
    <u-popup
      class="custom-popup"
      v-model="show"
      :zoom="false"
      mode="bottom"
      width="100%"
      height="730rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="content">
        <view class="box">
          <view class="title">
            <text>{{ wordData.word }}</text>
          </view>
          <view class="word">
            <view class="word_text end">
              【
              <text v-for="(item, index) in wordData.segList" :key="index">
                {{ item.ipaUs }}
              </text>
              】
            </view>
            <view class="word_text start">
              <text>{{ wordData.wordParaphrase }}</text>
            </view>
          </view>
          <view class="phonetic">
            <view class="phonetic_icon" @click="handleOperate('1')">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/laba.png"
                style="height: 36rpx"
                mode="heightFix"
              />
            </view>
            <view class="phonetic_text">
              <view
                v-for="(item, index) in wordData.segList"
                :key="index"
                @click="handleChangeSeg(index)"
              >
                <text
                  :style="{
                    color: index === currentSegIndex ? '#FEAA64' : '',
                  }"
                >
                  {{ item.ipaUs }}</text
                >
              </view>
            </view>
            <view class="phonetic_icon" @click="handleOperate('2')">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/shexiangtou.png"
                style="height: 24rpx"
                mode="heightFix"
              />
            </view>
          </view>
          <view class="info">
            <view class="info_content">
              <view class="info_title"> 词根助记 </view>
              <view class="info_box">
                <view class="root" v-if="wordData.wordRootList.length > 0">
                  <view class="root_content">
                    <view
                      class="root_item"
                      v-for="(item, index) in wordData.wordRootList"
                      :key="index"
                    >
                      <view class="root_box">
                        <view class="root_name"> {{ item.name }} </view>
                        <view class="root_text"> {{ item.parse }} </view>
                      </view>
                      <view
                        class="root_symbol"
                        v-if="index < wordData.wordRootList.length - 1"
                      >
                        +
                      </view>
                    </view>
                    <view class="root_item">
                      <view class="root_symbol"> = </view>
                      <view class="root_box all">
                        <view class="root_name"> {{ wordData.word }} </view>
                        <view class="root_text">
                          {{ wordData.wordParaphrase }}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="info_content">
              <view class="info_title"> 实用口语 </view>
              <view class="info_box">
                <view class="sentence">
                  <view class="sentence_title">
                    {{ wordData.sentence.sentenceEnglish }}
                  </view>
                  <view class="sentence_text">
                    {{ wordData.sentence.sentenceChinese }}
                  </view>
                  <view class="sentence_icon">
                    <view @click="play(1)">
                      <image
                        style="width: 22rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/fayin.png"
                        mode="widthFix"
                      />
                    </view>
                    <view @click="play(0.8)">
                      <image
                        style="width: 27rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/man.png"
                        mode="widthFix"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="btn">
            <view class="btn_content" @click="back()">
              <text>返回</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup
      class="custom-popup"
      v-model="videoShow"
      :zoom="false"
      mode="center"
      width="900rpx"
      height="675rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <video class="video" :src="videoUrl" controls object-fit="fill"></video>
    </u-popup>
  </view>
</template>

<script>
import { getSyncIpaBaseDetail } from "@/api/sync";

const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    wordData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      show: false,
      currentSegIndex: 0,
      videoUrl: "",
      videoShow: false,
    };
  },
  mounted() {},
  methods: {
    open() {
      this.show = true;
    },
    back() {
      this.show = false;
    },
    handleChangeSeg(index) {
      if (this.currentSegIndex === index) return;
      this.currentSegIndex = index;
    },
    handleOperate(type) {
      let phonetic = this.wordData.segList[this.currentSegIndex].ipaUs;
      getSyncIpaBaseDetail(phonetic).then((res) => {
        let data = res.data.us;
        if (type === "1") {
          if (!englishAudioContext.paused) return;
          englishAudioContext.src = data.audio;
          englishAudioContext.play();
        } else if (type === "2") {
          this.videoUrl = data.video;
          this.videoShow = true;
        }
      });
    },
    play(speed) {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordData.sentence.sentenceAudio;
      englishAudioContext.playbackRate = speed;
      englishAudioContext.play();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./PhonicsPopup";
</style>
